<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>会计系统-期初资产</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="会计系统-期初资产">
<meta name="description" content="会计系统-期初资产">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  <style>
    .col-lg-12{
      margin: auto;
    top: 17px;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    }
  </style>
<body>
<div class="lyear-layout-web" id="app">
  <div class="lyear-layout-container">
    <!--左侧导航-->

    <!--End 左侧导航-->
    
    <!--头部信息-->
 
    <!--End 头部信息-->
    
    <!--页面主要内容-->

    <main class="lyear-layout-content" >
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12" >
            <div class="card">
              <div class="card-toolbar clearfix">
                <div class="toolbar-btn-action">
                </div>
              </div>
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <template>
                      <el-table
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        :data="list"
                        style="width: 100%">
                        <el-table-column
                          prop="kmCoding"
                          label="科目编码"
                          width="130">
                        </el-table-column>
                        <el-table-column
                          prop="kmName"
                          label="科目名称"
                          width="130">
                        </el-table-column>
                        <el-table-column
                          prop="kmPrice"
                          label="余额方向"
                          width="140">
                          <template slot-scope="scope">
                            <span>{{config2.gzdStateList[scope.row.kmPrice]}}</span>
                         </template>
                        </el-table-column>
                        <el-table-column label="期初余额">
                        <el-table-column
                          prop="qcBeginningNumber"
                          label="数量"
                          width="140">
                          <template slot-scope="scope">
                            <input type="text" v-if="scope.row.kmNumber == null" disabled class="form-control"  style="width: 130; display: none; ">
                          <input type="text" v-if="scope.row.kmNumber != null"  @blur="blurBeginning1(scope.row.qcBeginningNumber,scope.row.kmId)"  v-model="scope.row.qcBeginningNumber"   class="form-control"  style="width: 130; display: block; ">
                         </template>
                        </el-table-column>
                        <el-table-column
                        prop="qcBeginningBalance"
                        label="金额"
                        width="140">
                        <template slot-scope="scope">
                          <input type="text" class="form-control"  @blur="blurBeginning2(scope.row.qcBeginningBalance,scope.row.kmId)"   v-model="scope.row.qcBeginningBalance"    style="width: 130;">
                       </template>
                      </el-table-column>

                      </el-table-column>
                      <el-table-column label="借方累计">
                        <el-table-column
                        prop="qcBorrowerNumber"
                        label="数量"
                        width="140">
                        <template slot-scope="scope">
                          <input type="text" v-if="scope.row.kmNumber == null" disabled class="form-control"  style="width: 130; display: none; ">
                          <input type="text" v-if="scope.row.kmNumber != null"  @blur="blurBorrower1(scope.row.qcBorrowerNumber,scope.row.kmId)"  v-model="scope.row.qcBorrowerNumber"    class="form-control"  style="width: 130; display: block; ">
                       </template>
                      </el-table-column>
                      <el-table-column
                      prop="qcBorrowerBalance"
                      label="金额"
                      width="140">
                      <template slot-scope="scope">
                        <input type="text" class="form-control" @blur="blurBorrower2(scope.row.qcBorrowerBalance,scope.row.kmId)" v-model="scope.row.qcBorrowerBalance"   style="width: 130;">
                     </template>
                    </el-table-column>

                      </el-table-column>
                      <el-table-column label="贷方累计">
                        <el-table-column
                        prop="qcLenderNumber"
                        label="数量"
                        width="140">
                        <template slot-scope="scope">
                          <input type="text" v-if="scope.row.kmNumber == null" disabled class="form-control"  style="width: 130; display: none; ">
                          <input type="text" v-if="scope.row.kmNumber != null" @blur="blurLender1(scope.row.qcLenderNumber,scope.row.kmId)" v-model="scope.row.qcLenderNumber"    class="form-control"  style="width: 130; display: block; ">
                       </template>
                      </el-table-column>
                      <el-table-column
                      prop="qcLenderBalance"
                      label="金额"
                      width="140">
                      <template slot-scope="scope">
                        <input type="text" class="form-control"   @blur="blurLender2(scope.row.qcLenderBalance,scope.row.kmId)"  v-model="scope.row.qcLenderBalance"  style="width: 130;">
                     </template>
                    </el-table-column>

                      </el-table-column>
                      <el-table-column label="年初余额">
                        <el-table-column
                        prop="qcYearsNumber"
                        label="数量"
                        width="140">
                      </el-table-column>
                      <el-table-column
                      prop="qcYearsBalance"
                      label="金额"
                      width="140">
                     
                    </el-table-column>
                 
                      </el-table>
                      
                    </template>
                  </table>
                </div>
                <!-- 添加模态框（Modal） -->
<!-- 修改模态框（Modal） -->

              </div>
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el:"#app",
  data:{
    config :{
        gzdStateList: {
            0: '禁用',
            1: '启用',
            },  
    },
    config2 :{
        gzdStateList: {
            0: '借',
            1: '贷',
            },  
    },
    config3 :{
        gzdStateList: {
            1: '客户',
            2: '供应商',
            3: '职员',
            4: '部门',
            5: '项目',
            6: '存货',
            },  
    },
    config4 :{
        gzdStateList: {
            1: '外币',
            },  
    },
    checked: true,
    list:[],
    menu:[],
    loading: false,
    account:{},
    currentPage:1, //当前页码
    size:5, 
    totals:"",
    prePage:1,
    nextPage:1,
    totalPage:1, //总页数

    disabled:true,
    user:{
      kmCoding:"",
      kmName:"",
      kmCode:"",
      kmPrice:"",
      kmState:"",
      kmAccounting:"",
      kmForeign:""
    },
    user1:{
      kmAccounting:"",
      kmForeign:""
    },
    user2:{
     
    },
    user3:{
      kmAccounting:"",
    },
    qc:{
      qcBeginningBalance:"",   //期初  金额
      qcBeginningNumber:"", //期初  数量
      qcBorrowerBalance:"",  //借方 金额
      qcBorrowerNumber:"",  //借方 数量
      qcLenderNumber:"",  //贷方 数量
      qcLenderBalance:"",  //贷方 金额
      qcYearsNumber:"",  //年初 数量
      qcYearsBalance:"",  //年初 金额
    },
    roleid:"",
    menuup:{}
  },
  created () {
    this.getlist(1);
  },
  methods: {
    blurBeginning2(qcBeginningBalance,id){
      
      this.qc.qcBeginningBalance = qcBeginningBalance;
      this.qc.kmId = id
      // alert(JSON.stringify(this.qc))
      axios.post("http://localhost:8888/subjects/updateByPrimaryKeyBeginning",this.qc)
      .then(res => {
        console.log(res)
      this.getlist(1);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    blurBeginning1(qcBeginningNumber,id){
      this.qc.qcBeginningNumber = qcBeginningNumber;
      this.qc.kmId = id
      // alert(JSON.stringify(this.qc))
      axios.post("http://localhost:8888/subjects/updateByPrimaryKeyNumber",this.qc)
      .then(res => {
        console.log(res)
      this.getlist(1);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    blurBorrower2(qcBorrowerBalance,id){
      this.qc.qcBorrowerBalance = qcBorrowerBalance;
      this.qc.kmId = id
      // alert(JSON.stringify(this.qc))
      axios.post("http://localhost:8888/subjects/updateByPrimaryKeyBeginning",this.qc)
      .then(res => {
        console.log(res)
      this.getlist(1);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    blurBorrower1(qcBorrowerNumber,id){
      this.qc.qcBorrowerNumber = qcBorrowerNumber;
      this.qc.kmId = id
      // alert(JSON.stringify(this.qc))
      axios.post("http://localhost:8888/subjects/updateByPrimaryKeyNumber",this.qc)
      .then(res => {
        console.log(res)
      this.getlist(1);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    blurLender1(qcLenderNumber,id){
      this.qc.qcLenderNumber = qcLenderNumber;
      this.qc.kmId = id
      // alert(JSON.stringify(this.qc))
      axios.post("http://localhost:8888/subjects/updateByPrimaryKeyNumber",this.qc)
      .then(res => {
        console.log(res)
      this.getlist(1);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    blurLender2(qcLenderBalance,id){
      this.qc.qcLenderBalance = qcLenderBalance;
      this.qc.kmId = id
      // alert(JSON.stringify(this.qc))
      axios.post("http://localhost:8888/subjects/updateByPrimaryKeyBeginning",this.qc)
      .then(res => {
        console.log(res)
      this.getlist(1);
      })
      .catch(err => {
        console.error(err); 
      })
    },
    getlist(currentPage){
      this.loading=true;
      setTimeout(() => {
      this.loading = false;
        axios.get("http://localhost:8888/subjects/accets")
        .then(res => {
          this.list = res.data
          console.log(res)
        })
        .catch(err => {
          console.error(err); 
        })
       }, 2000);
    },
  }
  })
</script>
</body>
</html>